<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ExtMongo</title>
    <link rel="stylesheet" type="text/css" href="/assets/ext/3.2.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="/assets/ext/3.2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/assets/ext/3.2.0/ext-all.js"></script>
    <script type="text/javascript" src="/assets/common/utils.js"></script>
    <script type="text/javascript" src="/assets/ext/3.2.0/examples/ux/FieldLabeler.js"></script>

    <script type="text/javascript">
        Ext.onReady(function(){
            var store = new Ext.data.SimpleStore({
                fields:['id','name','desc'],
                data:[
                    ['1','xinghuo','phpxx'],
                    ['2','xiaoqiang','phpxxxx'],
                    ['3','hongshu','pd']
                ]
            })
            var grid = new Ext.grid.GridPanel({
                store:store,
                title:'技术部',
                viewConfig:{forceFit:true},
                columns:[
                    {header:'id',dataIndex:'id'},
                    {header:'name',dataIndex:'name'},
                    {header:'desc',dataIndex:'desc'},
                ],
                tbar:new Ext.Toolbar(['添加','删除','修改']),
                bbar:new Ext.PagingToolbar({
                    pageSize:15,
                    store:store
                })

            });

            function createMenuDB(node){

                return new Ext.menu.Menu({
                    items:[
                        {
                            text: '新建',
                            data:node,
                            handler:function(menu,item,e){
                                var form = new Ext.form.FormPanel({
                                    defaultType: 'textfield',
                                    labelAlign: 'right',
                                    labelWidth: 50,
                                    buttonAlign: 'center',
                                    baseCls: 'x-plain',
                                    url: '/admin/mongo/createCollection',

                                    frame:true,
                                    width: 220,

                                    items: [{
                                        fieldLabel: '表名',
                                        id:"collectionName"


                                    }],
                                    buttons: [{
                                        text:'确定',
                                        data:menu.data,
                                        handler:function(e){
                                            form.getForm().submit({
                                                params: {collect: e.data.id+'collection='+Ext.get('collectionName').getValue()},
                                                success:function(form, action){
                                                    if (action.result.success) {
                                                        Ext.getCmp('treePanel').getNodeById(e.data.id).insertBefore({text:Ext.get('collectionName').getValue(),id: e.data.id+"collection="+Ext.get('collectionName').getValue(),leaf:true})
                                                    }
                                                    console.log(action);
                                                    Ext.Msg.alert("提示",action.result.msg);
                                                },
                                                failure:function(){
                                                    Ext.Msg.alert('错误', '操作失败！');
                                                }
                                            });
                                        }
                                    }]
                                });
                                new Ext.Window({
                                    title: '新建表',
//                                    layout:'fit',
                                    closeAction:'close',
                                    items:[
                                        { xtype: 'displayfield', value: '<br/>' }
                                        ,

                                        form
                                    ]
                                }).show();

                                //}

                            }
                        },
                        {
                            text: '删除',
                            data:node,
                            handler:function(menu,item,e) {
                                //!menu.data.parentNode.leaf &&
                                 Ext.MessageBox.confirm('提示', '确定要删除库:'+menu.data.text+" 吗?", function(id){
                                    console.log(menu.data.text);
                                    if (id == 'yes') {
                                        Ext.Ajax.request({
                                            url:"<?php echo Boot::link('/admin/mongo/dropDb') ?>",
                                            params:{
                                                nodeid:menu.data.id,
                                                action:'drop'
                                            },
                                            success:function(response,options){
                                                var o = Ext.util.JSON.decode(response.responseText);
                                                if (o.result) {
                                                    Ext.getCmp('treePanel').getNodeById(menu.data.id).remove();
                                                }
//                                                Ext.Msg.alert("提示",o.msg);
                                             },
                                            failure:''
                                        })
                                    }
                                });
                            }
                        }
                    ]
                });
            }
            function createMenuServer(node){
                return new Ext.menu.Menu({
                    items:[
                        {
                            text: '新建库',
                            data:node,
                            handler:function(menu,item,e){
                                var form = new Ext.form.FormPanel({
                                    defaultType: 'textfield',
                                    labelAlign: 'right',
                                    labelWidth: 50,
                                    closeAction:'close',
                                    buttonAlign: 'center',
                                    baseCls: 'x-plain',
                                    url: '/admin/mongo/createDb',

                                    frame:true,
                                    width: 220,

                                    items: [{
                                        fieldLabel: '库名',
                                        id:"dbName"


                                    }],
                                    buttons: [{
                                        text:'确定',
                                        data:menu.data,
                                        handler:function(e){
                                            form.getForm().submit({
                                                params: {nodeid: e.data.id+'db='+Ext.get('dbName').getValue()},
                                                success:function(form, action){
                                                    if (action.result.success) {
                                                        Ext.getCmp('treePanel').getNodeById(e.data.id).insertBefore({text:Ext.get('dbName').getValue(),id: e.data.id+"db="+Ext.get('dbName').getValue(),leaf:false})
                                                    }
                                                    console.log(action);
                                                    Ext.Msg.alert("提示",action.result.msg);
                                                },
                                                failure:function(){
                                                    Ext.Msg.alert('错误', '操作失败！');
                                                }
                                            });
                                        }
                                    }]
                                });
                                new Ext.Window({
                                    title: '新建库',
//                                    layout:'fit',
                                    closeAction:'close',
                                    items:[
                                        { xtype: 'displayfield', value: '<br/>' }
                                        ,

                                        form
                                    ]
                                }).show();

                                //}

                            }
                        }
                    ]
                });
            }
            function createMenuCollection(node){

                return  new Ext.menu.Menu({
                    items:[ {
                        text: '打开',
                        data:{text:node.text,nodeid:node.id},
                        handler: function(menu,item,e) {
                            var tab = tabPanel.getTabEl(menu.data.nodeid);

                            if (! tab ) {
                                tab = tabPanel.add({
                                    title:menu.data.text,
                                    layout: 'fit',

                                    id:menu.data.nodeid,
                                    closable:true,
                                    loadMask: 'loading...',
                                    autoLoad:{url:'/admin/mongo/collection',scripts:true,params:'collect='+menu.data.nodeid}
                                });
                                tab.show();
                            }else{
//                                          debugger
                                tabPanel.setActiveTab(menu.data.id);
                            }

                            console.log(node);
                            console.log(menu.data);
                        }
                    },
                        {
                            text: '删除',
                            data:node,
                            handler:function(menu,item,e){
                                Ext.MessageBox.confirm('提示', '确定要删除表:'+menu.data.text+" 吗?", function(id){
                                    console.log(menu.data.text);
                                    if (id == 'yes') {
                                        Ext.Ajax.request({
                                            url:"<?php echo Boot::link('/admin/mongo/dropCollection') ?>",
                                            params:{
                                                nodeid:menu.data.id,
                                                action:'drop'
                                            },
                                            success:function(response,options){
                                                var o = Ext.util.JSON.decode(response.responseText);
                                                if (o.result) {
                                                    Ext.getCmp('treePanel').getNodeById(menu.data.id).remove();
                                                }
                                                alert(o.msg);
                                            },
                                            failure:''
                                        })
                                    }
                                });
                            }
                        }
                    ]
                });
            }

              tree = new Ext.tree.TreePanel({
                title:'连接管理',
                rootVisible : false,
                enableDD:true,
                id:'treePanel',
                listeners:{
                    'click':function(node,e){

                        var menu1;
                        if(isCollection(node.id)){
                            menu1 = createMenuCollection(node);
                        }
                        if(isDbNode(node.id)){
                            menu1 = createMenuDB(node);
                        }
                        if(isServerNode(node.id)){
                            menu1 = createMenuServer(node);
                        }
                        if(menu1){
                            console.log("xx");
                            menu1.showAt(e.getXY());
                        }
                    }
                },

                loader : new Ext.tree.TreeLoader( {

                    dataUrl : '<?php echo Boot::link('/admin/mongo/dbs') ?>'// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值

                }),
            })
            var root = new Ext.tree.TreeNode({
                text : 'mongo_server',
                draggable : false,
                leaf:false,

                id : 'mongo_server'
            });
            tree.setRootNode(root);


            <?php foreach($servers as $server){?>
                root.appendChild(
                    new Ext.tree.AsyncTreeNode( {

                        text :  '<?php echo $server['name'];?>',

                        draggable : false,
                        leaf:false,
                        id : '<?php echo $server['id'];?>'//默认的node值：?node=-100

                    })

                );

            <?php }?>


             tabPanel = new Ext.TabPanel({
                enableTabScroll:true,
                frame:true,
                id:'viewTab',
                activeTab: 0,
                defaults:{autoScroll: true},

                listeners: {
                    activate: function (tab) {
                        tab.loader.load();
                    }
                }
            });
            tabPanel.add({
                title:'baidu',
                layout: 'fit',
                id:'baidu',
                items:[grid]
            }).show();
            var Viewport = new Ext.Viewport({
                layout:'border',
                items:[{
                    region:'north',
                    bodyStyle: 'background-color:#BBCCEE;',
                    height:40
                },{
                    region:'west',
                    items:[tree],
                    split:true,
                    layout:'fit',
                    width:200,
                    minSize:80,
                    collapsible:true,
                    height:'100%'
                },{
                    region:'center',
                    layout: 'fit',
                    items:[tabPanel]
                }]
            });


        });
    </script>
</head>
<body>

</body>
</html>
